<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            letters: ["a", "b", "c", "d"]
        },
        methods:{
            btnClick() {
                //0.不动态改变
                this.letters[0] = "aaa";

                //1.PUSH 在数组最后面添加元素，可添加多个
                //this.letters.push("c");

                //2.pop 删除数组最末尾的元素
                //this.letters.pop();

                //3.shift  删除数组最开始元素
                //this.letters.shift();

                //4.unshift 在数组头部添加元素，可添加多个
                //this.letters.unshift("aaa", "bbb");

                //5.splice 剪切 源代码有如下两种形式
                //splice(start: number, deleteCount: number, ...items: T[])//插入/剪切，填写三个参数，第三个参数可以是多个内容
                //splice(start: number, deleteCount?: number)  //只删除内容，填两个参数
                // ↓  在第2个元素后插入3个元素，同时删除第三个元素，
                //this.letters.splice(2, 1, "aaa", "bbb", "ccc")

            }
        }
    })
</script>

</body>
</html>